<template>
  <div class="monitor-code-list" v-loading="loading">
    <tag-content-header>
      <template #title>
        <span class="title-text">近7天监控代码值</span>
      </template>
      <template #tools>
        <el-input
          v-model="codeDesc"
          size="small"
          clearable
          placeholder="输入搜索关键字"
          @keyup.native.enter="getResults"
          @clear="getResults"
        >
          <el-button slot="append" type="primary" icon="el-icon-search" @click="getResults"></el-button>
        </el-input>
      </template>
    </tag-content-header>
    <template v-if="results.length">
      <ul class="codes-wrap">
        <li
          class="code-item"
          :class="{ 'is-active': activeId === item.codeCd, 'is-alarm': item.alarmStatus === 1 }"
          v-for="item in results"
          :key="item.codeCd"
          @click="handleCodeItemClick(item)"
        >
          {{ item.codeDesc }}
          <el-tag :type="item.alarmCount > 0 ? 'warning' : ''" effect="dark" size="mini">{{ item.alarmCount }}</el-tag>
        </li>
      </ul>
      <el-row>
        <el-col :span="24" align="right">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="params.currentPageNum"
            :page-size="params.pageSize"
            background
            layout="total, prev, pager, next"
            :total="totalSize"
            small
          >
          </el-pagination>
        </el-col>
      </el-row>
    </template>
    <div v-else class="empty-text">暂无数据</div>
  </div>
</template>

<script>
import $monitor from './api'
export default {
  name: 'CodeList',
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    },
    orgId: {
      type: [Number, String],
      required: true,
      default: ''
    }
  },
  data() {
    return {
      codeDesc: '',
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0,
      results: [],
      activeId: '',
      loading: false
    }
  },
  methods: {
    handleCodeItemClick(item) {
      this.activeId = item.codeCd
      this.$emit('changeCode', item)
    },
    getResults() {
      // 分页获取标签列表
      this.loading = true
      this.params.queryParams.tagId = this.tagId
      this.params.queryParams.orgId = this.orgId
      this.params.queryParams.codeDesc = this.codeDesc
      $monitor
        .codeList(this.params)
        .then(({ data }) => {
          if (data && data.code === '0') {
            this.results = data.data.records
            if (!this.activeId && this.results.length) {
              this.activeId = this.results[0].codeCd
              this.$emit('changeCode', this.results[0])
            }
            this.totalSize = data.data.totalSize
          } else {
            this.$message.error(data.data || data.msg)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCurrentChange(num) {
      this.params.currentPageNum = num
      this.getResults()
    },
    formatTime(date) {
      // 格式化时间
      return date.slice(0, 10)
    },
    reset() {
      this.codeDesc = ''
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
      this.totalSize = 0
      this.results = []
      this.activeId = ''
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.monitor-code-list {
  margin-top: 32px;
  .codes-wrap {
    // padding: 0 8px;
    margin-bottom: 8px;
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    .code-item {
      padding: 10px 20px;
      border: 1px dotted #ddd;
      margin: 10px;
      position: relative;
      flex-wrap: nowrap;
      border-radius: 4px;
      &.is-active {
        color: #4d82e9;
        background-color: #f4f4f4;
      }
      cursor: pointer;
    }
  }
  .tag-content-header .content-tools .el-button {
    padding-left: 12px;
  }
  .empty-text {
    text-align: center;
    line-height: 32px;
    color: #787878;
  }
}
</style>
